<script setup>
const emit = defineEmits(["selectIcon"]);

const emojiList = [
  "&#128512;", // 😀
  "&#128513;", // 😃
  "&#128514;", // 😄
  "&#128515;", // 😁
  "&#128516;", // 😆
  "&#128517;", // 😅
  "&#128518;", // 😂
  "&#128519;", // 🤣
  "&#128520;", // 😈
  "&#128521;", // 😉
  "&#128522;", // 😊
  "&#128523;", // 😇
  "&#128524;", // 🙂
  "&#128525;", // 😍
  "&#128526;", // 😎
  "&#128527;", // 😏
  "&#128528;", // 😐
  "&#128529;", // 😑
  "&#128530;", // 😒
  "&#128531;", // 😓
  "&#128532;", // 😔
  "&#128533;", // 😕
  "&#128534;", // 😖
  "&#128535;", // 😗
  "&#128536;", // 😘
  "&#128537;", // 😙
  "&#128538;", // 😚
  "&#128539;", // 😛
  "&#128540;", // 😜
  "&#128541;", // 😝
  "&#128542;", // 😞
  "&#128543;", // 😟
  "&#128544;", // 😠
  "&#128545;", // 😡
  "&#128546;", // 😢
  "&#128547;", // 😣
  "&#128548;", // 😤
  "&#128549;", // 😥
  "&#128550;", // 😦
  "&#128551;", // 😧
  "&#128552;", // 😨
  "&#128553;", // 😩
  "&#128554;", // 😪
  "&#128555;", // 😫
  "&#128556;", // 😬
  "&#128557;", // 😭
  "&#128558;", // 😮
  "&#128559;", // 😯
  "&#128560;", // 😰
  "&#128561;", // 😱
  "&#128562;", // 😲
  "&#128563;", // 😳
  "&#128564;", // 😴
  "&#128565;", // 😵
  "&#128566;", // 😶
  "&#128567;", // 😷
  "&#128568;", // 😸
  "&#128569;", // 😹
  "&#128570;", // 😺
  "&#128571;", // 😻
  "&#128572;", // 😼
  "&#128573;", // 😽
  "&#128574;", // 😾
  "&#128575;", // 😿
  "&#128576;", // 🙀
  "&#128577;", // 🙁
  "&#128578;", // 🙂
  "&#128579;", // 🙃
  "&#128580;", // 🙄
  "&#128581;", // 🙅
  "&#128582;", // 🙆
  "&#128583;", // 🙇
  "&#128584;", // 🙈
  "&#128585;", // 🙉
  "&#128586;", // 🙊
  "&#128587;", // 🙋
  "&#128588;", // 🙌
  "&#128589;", // 🙍
  "&#128590;", // 🙎
  "&#128591;", // 🙏
  "&#128640;", // 🚀
  "&#128141;", // 💌
  "&#129313;", // 🤗
  "&#129314;", // 🤔
  "&#129315;", // 🤖
  "&#129316;", // 🤘
  "&#129317;", // 🤙
  "&#129318;", // 🤚
  "&#129319;", // 🤛
  "&#129320;", // 🤜
  "&#129321;", // 🤝
  "&#129323;", // 🤞
  "&#129324;", // 🤟
  "&#129325;", // 🤠
  "&#129326;", // 🤡
  "&#129327;", // 🤢
  "&#129328;", // 🤣
  "&#129329;", // 🤤
  "&#129330;", // 🤥
  "&#129331;", // 🤦
  "&#129332;", // 🤧
  "&#129333;", // 🤨
  "&#128039;", // 🐧
  "&#128040;", // 🐨
  "&#128041;", // 🐩
  "&#128042;", // 🐪
  "&#128043;", // 🐫
  "&#128044;", // 🐬
  "&#128045;", // 🐭
  "&#128046;", // 🐮
  "&#128047;", // 🐯
  "&#128048;", // 🐰
  "&#128049;", // 🐱
  "&#128050;", // 🐲
  "&#128051;", // 🐳
  "&#128052;", // 🐴
  "&#128053;", // 🐵
  "&#128054;", // 🐶
  "&#128055;", // 🐷
  "&#128056;", // 🐸
  "&#128057;", // 🐹
  "&#128058;", // 🐺
  "&#128059;", // 🐻
  "&#128060;", // 🐼
  "&#128061;", // 🐽
  "&#128062;", // 🐾
  "&#128063;", // 🐿️
  "&#128064;", // 👀
  "&#128065;", // 👁️
  "&#128066;", // 👂
  "&#128067;", // 👃
  "&#128068;", // 👄
  "&#128069;", // 👅
  "&#128070;", // 👆
  "&#128071;", // 👇
  "&#128072;", // 👈
  "&#128073;", // 👉
  "&#128074;", // 👊
  "&#128075;", // 👋
  "&#128076;", // 👌
  "&#128077;", // 👍
  "&#128078;", // 👎
  "&#128079;", // 👏
  "&#128080;", // 👐
  "&#128081;", // 👑
  "&#128082;", // 👒
  "&#128083;", // 👓
  "&#128084;", // 👔
  "&#128085;", // 👕
  "&#128086;", // 👖
  "&#128087;", // 👗
  "&#128088;", // 👘
  "&#128089;", // 👙
  "&#128090;", // 👚
  "&#128091;", // 👛
  "&#128092;", // 👜
  "&#128093;", // 👝
  "&#128094;", // 👞
  "&#128095;", // 👟
  "&#128096;", // 👠
  "&#128097;", // 👡
  "&#128098;", // 👢
  "&#128099;", // 👣
  "&#128100;", // 👤
  "&#128101;", // 👥
  "&#128102;", // 👦
  "&#128103;", // 👧
  "&#128104;", // 👨
  "&#128105;", // 👩
  "&#128106;", // 👪
  "&#128107;", // 👫
  "&#128108;", // 👬
  "&#128109;", // 👭
  "&#128110;", // 👮
  "&#128111;", // 👯
  "&#128112;", // 👰
  "&#128113;", // 👱
  "&#128114;", // 👲
  "&#128115;", // 👳
  "&#128116;", // 👴
  "&#128117;", // 👵
  "&#128118;", // 👶
  "&#128119;", // 👷
  "&#128120;", // 👸
  "&#128121;", // 👹
  "&#128122;", // 👺
  "&#128123;", // 👻
  "&#128124;", // 👼
  "&#128125;", // 👽
  "&#128126;", // 👾
  "&#128127;", // 👿
  "&#128128;", // 💀
  "&#128129;", // 💁
  "&#128130;", // 💂
  "&#128131;", // 💃
  "&#128132;", // 💄
  "&#128133;", // 💅
  "&#128134;", // 💆
  "&#128135;", // 💇
  "&#128136;", // 💈
  "&#128137;", // 💉
  "&#128138;", // 💊
  "&#128139;", // 💋
  "&#128140;", // 💌
  "&#127815;", // 🍇
  "&#127816;", // 🍈
  "&#127817;", // 🍉
  "&#127818;", // 🍊
  "&#127819;", // 🍋
  "&#127820;", // 🍌
  "&#127821;", // 🍍
  "&#127822;", // 🍎
  "&#127823;", // 🍏
  "&#127824;", // 🍐
  "&#127825;", // 🍑
  "&#127826;", // 🍒
  "&#127827;", // 🍓
  "&#127828;", // 🍔 (虽然是汉堡，但有时也用来表示食物)
  "&#127829;", // 🍕 (披萨，有时也用来表示食物)
  "&#127830;", // 🍖 (有时用来表示肉类食物)
  "&#127831;", // 🍗 (鸡腿，有时用来表示肉类食物)
  "&#127832;", // 🍘 (日式米饼)
  "&#127833;", // 🍙 (饭团)
  "&#127834;", // 🍚 (米饭)
  "&#127835;", // 🍛 (咖喱饭)
  "&#127836;", // 🍜 (面条)
  "&#127837;", // 🍝 (意大利面)
  "&#127838;", // 🍞 (面包)
  "&#127839;", // 🍟 (薯条)
  "&#127840;", // 🍠 (烤红薯)
  "&#127841;", // 🍡 (团子)
  "&#127842;", // 🍢 (关东煮)
  "&#127843;", // 🍣 (寿司)
  "&#127844;", // 🍤 (炸虾)
  "&#127845;", // 🍥 (鱼糕)
  "&#127846;", // 🍦 (冰淇淋)
  "&#127847;", // 🍧 (刨冰)
  "&#127848;", // 🍨 (冰淇淋)
  "&#127849;", // 🍩 (甜甜圈)
  "&#127850;", // 🍪 (饼干)
  "&#127851;", // 🍫 (巧克力)
  "&#127852;", // 🍬 (糖果)
  "&#127853;", // 🍭 (棒棒糖)
  "&#127854;", // 🍮 (布丁)
  "&#127855;", // 🍯 (蜂蜜)
  "&#127856;", // 🍰 (蛋糕)
  "&#127857;", // 🍱 (便当)
  "&#127858;", // 🍲 (火锅)
  "&#127859;", // 🍳 (煎蛋)
  "&#127860;", // 🍴 (刀叉)
  "&#127861;", // 🍵 (茶)
  "&#127862;", // 🍶 (清酒)
  "&#127863;", // 🍷 (红酒)
  "&#127864;", // 🍸 (鸡尾酒)
  "&#127865;", // 🍹 (热带饮料)
];

const handleIcon = (item) => {
  if (item) {
    emit("selectIcon", item);
  }
};
</script>

<template>
  <el-dropdown trigger="click" class="search-down" placement="bottom-start">
    <svg-icon name="smileFace" width="25px"></svg-icon>
    <template #dropdown>
      <div class="pop">
        <div class="icon-list">
          <div class="w-[30px] h-[30px] cursor-pointer" v-for="item in emojiList" :key="item">
            <div v-html="item" style="font-size: 2rem" @click="handleIcon(item)"></div>
          </div>
        </div>
      </div>
    </template>
  </el-dropdown>
</template>

<style lang="scss" scoped>
.pop {
  padding: 10px;
  overflow: auto;
}
.icon-list {
  width: 300px;
  min-height: 100px;
  max-height: 200px;
  display: grid;
  grid-template-columns: repeat(9, 30px);
  grid-auto-rows: 30px;
  gap: 3px;
}
</style>
